<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    /* 元素选择器，选中所有的 */
    div {
      color: red;
    }
    /* css层叠 */
    /* 类选择器，精确的选择某一个 */
   .box {
     color:blue;
   }
   /* 前面加井号， */
   #home {
     color: green;
   }

  </style>
</head>
<body>
  <!-- 强调：在同一个HTML文档中，id不要重复，因该是唯一的。只给一个元素加相同的id！ -->
  <div>我是div1元素</div>
  <!-- 不要用元素的名称作为id或者class的名称 -->
  <div class="box">我是div2元素</div>
  <div id="home"> 我是div3元素</div>
  <p class="box">我是p元素</p>
  <h2 id="home">我是标题</h2>
  <!-- class的名字比较复杂 -->
  <!-- 用连接符号连接起来，或者用下划线连接，不然就是两个单词 -->
  <div class="box one"></div>
  <div class="box-one"</div>
    <!-- 小驼峰，大驼峰比较少用，JS比较常用 -->
    <div class="boxONE BoxONE"></div>
    <!-- 小驼峰，大驼峰分别对应 -->



</body>
</html>